$gradient: linear-gradient(to right bottom, #1570bf 50%, #59c0fe 100%);

.ide-body {
	.video-link {
		display: block;
		margin: 4rem auto 0;
		text-align: center;
		color: #FFFFFF;

		@include breakpoint(max-width $break-tablet) {
			margin-top: 6rem;
		}
	}

	.webide-section-block-row {
		@include container;
		@include break;
		margin-top: 2rem;
		width: span(16 of 16);

		@include breakpoint($break-tablet) {
		}

		@include breakpoint($max-width) {
		}

		.section-block {
			margin-bottom: 1.5rem;
		}
	}

	.section-block {
		@include container;
		@include breakpoint($break-tablet) {
			float: left;
			width: span(12 of 32);
		}

		width: span(14 of 16);

		&:first-of-type {
			width: 100%;
			@include breakpoint($max-width) {
				margin-left: span(0 of 32);
				margin-right: span(1 of 32);
				width: 55%;
			}
		}

		&:last-of-type {
			width: 100%;
			@include breakpoint($max-width) {
				margin-right: span(0 of 32);
				width: 40%;
			}
		}

		h4 {
			margin-top: 0;

			@include breakpoint($max-width) {
				padding-top: 9%;
			}

			@include breakpoint(1400px) {
				padding-top: 14%;
			}
		}

		.section-block-text {
			text-align: center;
			font-weight: 300;
			@include breakpoint($break-tablet) {
				line-height: 25px;
				font-size: 18px;
			}
		}

		.section-block-text a, .section-block-copy a {
			color: #00f;
			text-decoration: underline;

			&:hover,
			&:focus,
			&:active {
				text-decoration: underline;
				color: #00b;
			}

			&:active,
			&:focus {
				outline: none;
			}
		}
	}

	.h_iframe {
		position: relative;

		.ratio {
			display: block;
			width: 100%;
			background: $dark-gray;
			opacity: 0;
			height: auto;
		}
		iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}
}
